<template>
    <!-- plugin/components/diy-video/diy-video.wxml -->
    <view
        class="container"
        :style="
            'margin-top: ' +
            componentData.data.marginTop * 2 +
            'rpx;margin-bottom: ' +
            componentData.data.marginBottom * 2 +
            'rpx; padding: 0 ' +
            componentData.data.marginLeftRight * 2 +
            'rpx;'
        "
    >
        <view
            class="content"
            :style="
                'background-color: ' +
                componentData.data.bgColor +
                ';padding: ' +
                componentData.data.paddingTopBottom * 2 +
                'rpx ' +
                componentData.data.paddingLeftRight * 2 +
                'rpx;border-radius:' +
                componentData.data.borderRadius * 2 +
                'rpx;'
            "
        >
            <video
                id="myVideo"
                class="video-box"
                :src="src"
                @error="videoErrorCallback"
                :show-center-play-btn="true"
                :show-play-btn="true"
                :autoplay="isAuto"
                :poster="componentData.data.cover"
                controls
				object-fit="contain"
                :picture-in-picture-mode="['push', 'pop']"
            ></video>
        </view>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// plugin/components/diy-video/diy-video.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {
            isAuto: false,
            src: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        }
    },
    beforeMount() {},
    mounted() {
        if (this.componentData.data.autoplay == 1) {
            this.setData({
                isAuto: true
            });
        } else {
            this.setData({
                isAuto: false
            });
        } // console.log('diy-video',this.data.componentData.data);

        if (this.componentData.data.sources == 1) {
            this.setData({
                src: this.componentData.data.localSrc
            });
        } else {
            this.setData({
                src: this.componentData.data.src
            });
        }
    },
    onLoad() {},
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        videoErrorCallback(e) {
            console.log(e);
        }
    }
};
</script>
<style>
@import './diy-video.css';
</style>
